<template>
	<view class="content">
		<view class="title-bar">
			<u-tabs :list="list1"  :current="current" @change="change" 	lineWidth="20" activeColor="#0DBA5A" >
			</u-tabs>
		</view>
		<view class="zhanwei"></view>
		<view class="list-box" v-if="contsList.length > 0">
			<view class="item" v-for="(item, index) in contsList" :key="index">
				<view class="title">{{item.pointsDesc}}</view>
				<view class="time">{{item.pointsTime}}</view>
				<view class="number number1" v-if="item.pointsDesc.includes('订单支付')">-{{ item.pointsValue }}</view>
				<view class="number number2" v-else>+{{ item.pointsValue }}</view>
			</view>
		</view>
		<view class="loadmore">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				list1: [
					{
						name: '全部',
					}, {
						name: '获得',
					}, {
						name: '使用'
					},
				],
				scrollToTop: '',
				status: 'loadmore', // this.status = 'nomore'  设置底部加载更多显示
				navActive: 1,
				allData: [],
				contsList: [
					// {
					// 	title: '订单支付-沈阳景区名称XXXXXX',
					// 	time: '2024-01-26',
					// 	money: '-500'
					// },
					//  {
					// 	 title: '订单支付-沈阳景区名称XXXXXX',
					// 	 time: '2024-01-26',
					// 	 money: '-500'
					//  },
					//  {
					// 	 title: '订单支付-沈阳景区名称XXXXXX',
					// 	 time: '2024-01-26',
					// 	 money: '+500'
					//  }
				]
			}
		},
		onLoad() {
			this.getPointsList()
		},
		methods: {
			change(index) {
				this.current = index;
				this.contsList = [];
				this.status = 'loading';
				
				if (this.current == 0) {
					this.contsList = this.allData;
				} else if (this.current == 1) {
					this.contsList = this.allData.filter(i => !i.pointsDesc.includes('订单支付'))
				} else if (this.current == 2) {
					this.contsList = this.allData.filter(i => i.pointsDesc.includes('订单支付'))
				}
				this.status = 'nomore'
			},
			// 获取积分
			getPointsList() {
				this.status = 'loading';
				let data = {
					customerId: uni.getStorageSync('openId').userId
				}
				this.$http({
					url: this.$myApi.pointsDetail + '?userId=' + data.customerId,
					method: 'GET',
					hideLoading: true,
					// data: data,
					success: res => {
						if (res.code == 200) {
							res.rows = res.rows.sort((a, b) => new Date(b.pointsTime) - new Date(a.pointsTime))
							this.allData = res.rows;
							
							this.contsList = res.rows;
						} else { }
					},
					fail: err => {
						
					},
					complete: e => {
						this.status = 'nomore';
						// uni.stopPullDownRefresh();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 20rpx;
	}
	.list-box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		opacity: 1;
		margin-left: 30rpx;
		margin-top: 10rpx;
		padding-bottom: 24rpx;
		.item {
			border-bottom: 1rpx solid #CCCCCC;
			margin: 21rpx 27rpx 16rpx 30rpx;
			position: relative;
			.number {
				position: absolute;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FF6F00;
				line-height: 42rpx;
				right: 2rpx;
				top: 32rpx;
				&.number2 {
					color: #0DBA5A;
				}
			}
			.title {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #262626;
				line-height: 42rpx;
				padding-top: 21rpx;
			}
			.time {
				height: 30rpx;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #686868;
				line-height: 42rpx;
				margin-bottom: 16rpx;
			}
		}
		
	}
	::v-deep {
		.u-tab-bar {
			width: 120rpx !important;
			position: relative;
			left: -40rpx;
		}
	}
	
	.title-bar {
		position: fixed;
		top: 0rpx;
		width: 750rpx;
		height: 90rpx;
		background-color: #fff;
		z-index: 99;
		height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
	
	
	
	}
	
	.zhanwei {
		width: 100%;
		background-color: transparent;
		height: 90rpx;
	}
	
	.loadmore {
		margin: 30rpx auto;
	}
	
</style>

<style>
	page {
		background: #EFEFEF;
	}
	
</style>